<template>
	<div>
		<div class="container-wrap" ref="container" :style="containerStyle">
			<uni-nav-bar fixed shadow :border="false" :title="title" left-icon="left" @clickLeft="onClickLeft"
				v-if="title">
				<template #right>
					<button class="pub-btn" round type="primary" @click="handlePub(2)">发布</button>
				</template>
			</uni-nav-bar>
			<div class="content-box" :style="contentBoxStyle">
				<div ref="form">
					<van-form ref="formBox">
						<van-field v-model="dataForm.title" name="title" :rules="[{ required: true, message: '请填写标题'}]"
							placeholder="请填写标题" />
						<van-field v-model="dataForm.content" name="content"
							:rules="[{ required: true, message: '请填写内容' }]" type="textarea" class="textarea"
							placeholder="写下你的想法…" autosize rows="8" />
						<van-field name="fileList" class="upload">
							<template #input>
								<van-uploader v-model="fileList" :isDisu='true'></van-uploader>
							</template>
						</van-field>
					</van-form>
				</div>
				<div class="cate-box">
					<van-dropdown-menu>
						<van-dropdown-item :title="cateDropdownTitle" ref="cateDropdown" @open="dropdownOpen"
							@closed="dropdownClosed" top>
							<van-tree-select :items="mainCategoryList" v-model='activeFirstCateIndex'
								:main-active-index.sync="activeFirstCateIndex">
								<template #content>
									<template v-for="(item, index) in childrenCategoryList">
										<button v-if="index === 0" class="top-button" :key="index"
											@click="firstCateMore">全部话题 <van-icon name="arrow" /></button>

										<div :key="index*2" v-else>
											<div class="cate-top">
												<div class="cate-name">{{ item.name }}</div>
												<div class="cate-more" v-if="item.name" @click="cateMore(item)">全部
													<van-icon name="arrow" />
												</div>
											</div>
											<div class="cate-wrap" v-if="item.children">
												<CustomSelect :mr0Number="3" v-model="selectCateTypes"
													:options="item.children" @change="cateChange"></CustomSelect>
											</div>
										</div>
									</template>
								</template>
							</van-tree-select>
						</van-dropdown-item>
					</van-dropdown-menu>
				</div>
				<div class="draft-box">
					<span class="fs-14 fc-666" native-type="button" @click="handlePub(1)"><i
							class="icon iconfont icon-wodecaogao mr5"></i>存为草稿</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import CustomSelect from '@/components/common/CustomSelect'
	import vanField from "@/components/vant/van-field/van-field.vue"
	import vanUploader from "@/components/vant/van-uploader/van-uploader.vue"
	import vanForm from "@/components/vant/van-form/van-form.vue"
	import vanIcon from "@/components/vant/van-icon/van-icon.vue"
	import vanTreeSelect from "@/components/vant/van-tree-select/van-tree-select.vue"
	import vanDropdownItem from "@/components/vant/van-dropdown-item/van-dropdown-item.vue"
	import vanDropdownMenu from "@/components/vant/van-dropdown-menu/van-dropdown-menu.vue"
	const defaultValue = {
		categoryId: '',
		name: '全部话题'
	}
	export default {
		name: "ForumAdd",

		components: {
			CustomSelect,
			vanField,
			vanUploader,
			vanForm,
			vanIcon,
			vanTreeSelect,
			vanDropdownItem,
			vanDropdownMenu
		},
		data() {
			return {
				title: '发布话题',
				id: '',
				siteType: '',
				dataForm: {
					categoryName: '',
					content: '',
					logoImgUrl: '',
					title: ''
				},
				fileList: [],
				cateDropdownTitle: '话题分类',
				mainCategoryList: [], // 主分类列表
				childrenCategoryList: [defaultValue], // 次级分类列表
				activeFirstCateIndex: 0,
				selectCateTypes: [],
				currentSiteType: '',
				queryCateId: '',
				isDropdownOpen: false,
				containerStyle: {},
				contentBoxStyle: {}
			}
		},
		watch: {
			activeFirstCateIndex(val) {
				if (val) {
					let p1 = this.mainCategoryList[val]
					this.getNextCategoryList(p1)
				} else {
					this.childrenCategoryList = [defaultValue]
				}
			}
		},
		mounted() {
			this.initPage()
		},
		methods: {
			onClickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			initPage() {
				this.getCategoryList()
			},
			handlePub(type) {
				if (!this.dataForm.title) {
					this.$toast.fail('请填写标题')
					return false
				} else if (!this.dataForm.content) {
					this.$toast.fail('请填写内容')
					return false
				}
				// this.$refs.formBox.validate().then(() => {
				if (!this.queryCateId) {
					this.$toast.fail('请选择话题分类')
					return false
				}
				let str = ''
				str = type === 1 ? (this.id ? '修改' : '保存') : '保存并发布'
				this.$dialog.confirm({
					message: `确定${str}该话题？`,
					showCancelButton: true,
				}).then(_ => {
					this.$toast.success('保存成功')
				}).catch(e => {})
			},
			dropdownOpen() {
				this.$nextTick(() => {
					this.scrollToBottom('1')
					this.isDropdownOpen = true
					this.containerStyle = {
						'min-height': `calc(100vh + ${this.$refs.form.offsetHeight}px)`
					}
					this.contentBoxStyle = {
						padding: '60px 0 15px'
					}
				})
			},
			dropdownClosed() {
				this.isDropdownOpen = false
				this.containerStyle = {
					'min-height': '100vh'
				}
				this.contentBoxStyle = {
					padding: '60px 15px 15px'
				}
				this.scrollToBottom('2')
			},
			scrollToBottom(type) {
				this.$nextTick(() => {
					window.scrollTo({
						top: type === '1' ? this.$refs.container.scrollHeight : 60,
						behavior: 'smooth'
					})
				})
			},

			// 一级分类交互
			firstCateMore() {
				this.queryCateId = this.mainCategoryList[this.activeFirstCateIndex] && this.mainCategoryList[this
					.activeFirstCateIndex].categoryId
				this.searchList()
				let name = this.mainCategoryList[this.activeFirstCateIndex] && this.mainCategoryList[this
					.activeFirstCateIndex].name
				this.selectCateTypes = []
				this.cateDropdownTitle = name
			},

			// 二级分类交互
			cateMore(item) {
				console.log("=>(add.vue:287) item", item);
				this.queryCateId = item.categoryId
				this.searchList()
				this.selectCateTypes = []
				this.cateDropdownTitle = item.name
			},

			// 三级分类交互
			cateChange(val, item) {
				this.queryCateId = item[0].categoryId
				this.searchList()
				this.cateDropdownTitle = item[0].name
			},

			getTagList() {
				let params = {
					siteId: this.siteId,
					siteType: this.currentSiteType
				}
				this.$api.mgtCourse.tagList(params).then(res => {
					res = res.list || res
					res.unshift({
						labelId: '',
						name: '全部'
					})
					this.tagList = res.list || res
				})
			},

			closeDropdown() {
				uni.$emit('closeDropdown')
			},

			getCategoryList() {
				let res = [{
					categoryId: "3723a355-7242-4879-a3b8-7db8411efb66",
					code: "fenlei1",
					id: "200335",
					idPath: null,
					isTop: "2",
					layer: 1,
					name: "话题分类一",
					orderNum: 1,
					parentId: "0",
				}, {
					categoryId: "39ee367e-1eb6-4e36-b6cc-b368683bcfa8",
					code: "fenlei2",
					id: "200336",
					idPath: null,
					isTop: "2",
					layer: 1,
					name: "话题分类二",
					orderNum: 2,
					parentId: "0"
				}]
				res.forEach(item => item.text = item.name)
				this.mainCategoryList = res
			},
			getNextCategoryList(selectedCategory) {
				let params = {
					siteId: this.siteId,
					parentId: selectedCategory.id,
					type: 'B'
				}

			},
			// 查询
			searchList() {
				this.closeDropdown()
			}
		}
	}
</script>

<style scoped lang="scss">
	:deep(uni-button) {
		font-size: 15px;
	}

	.container-wrap {
		position: relative;
		min-height: 100vh;
		background: #F6F6F6;

		.pub-btn {
			height: 30px;
			padding: 4px 12px;
		}

		.content-box {
			padding: 60px 15px 15px;
			background-color: #f6f6f6;

			:deep(.van-form) {
				::-webkit-input-placeholder {
					/*Webkit browsers*/
					font-size: 14px;
				}

				.van-field--error .van-field__control,
				.van-field--error .van-field__control::placeholder {
					color: #cdcdcd;
				}


				.van-cell {
					padding: 0 0 15px 0;
					background: #F6F6F6;

					textarea {
						padding: 10px;
					}
				}

				.van-field__error-message {
					margin-left: 20px;
				}

				.uni-easyinput__content {
					width: 100%;
					min-height: 50px;
					background: #FFFFFF;
					border-radius: 12px;
					border: 1px solid #EEEEEE;
					text-indent: 20px;
				}

				.file-picker__box-content {
					background: #FFFFFF;
					border-radius: 4px;
					border: 1px solid #EEEEEE;
				}
			}

			:deep(.van-tree-select__nav) {
				flex: inherit;
			}

			:deep(.van-tree-select) {
				height: 460px !important;

				.van-tree-select__content {
					padding: 15px;
				}
			}

			:deep(.top-button) {
				width: 100%;
				height: 48px;
				background: #fff;
				border: 1px solid #ebedf0
			}

			:deep(.cate-top) {
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				margin-top: 15px;
				margin-bottom: 8px;

				.cate-name {
					height: 22px;
					font-size: 16px;
					font-weight: 400;
					max-width: calc(100% - 50px);
				}

				.cate-more {
					font-size: 12px;
					color: #666666;
				}
			}

			:deep(.van-dropdown-item) {
				//padding: 0 15px 15px;
				//width: 90%;
				margin: 0 auto;

				.van-overlay {
					border: 1px solid #333;
					/*background-color: transparent;
          height: 80%;*/
				}
			}

			:deep(.van-dropdown-menu__bar) {
				width: 100%;
				height: 50px;
				background: #FFFFFF;
				border-radius: 12px;
				border: 1px solid #EEEEEE;

				.van-dropdown-menu__title {
					width: 100%;

					&::after {
						right: 20px;
						border-color: transparent transparent #bbb #bbb;
						;
					}
				}
			}
		}

		.draft-box {
			width: 100%;
			margin-top: 50px;
			text-align: center;
		}
	}
</style>